<template>
  <div>
    <div class="top">
      <el-button
        class="el-icon-plus add"
        type="primary"
        size="mini"
        @click="addOrUpdateMaterials('add')"
        >新增</el-button
      >
    </div>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column :prop="item.prop" :label="item.label" align="center" v-for="(item,index) in materialListTableHeard" :key="index">
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="prop"
        label="操作" >
        <template slot-scope="{row}">
          <el-button type="text" size='mini' @click="addOrUpdateMaterials('edit',row)">修改</el-button>
          <el-button type="text" size='mini' @click="deleteMaterials(row.id)">删除</el-button>
        </template>
      </el-table-column>
      <!-- 无数据 -->
      <template slot="empty">
        <div class="noData" v-show="tableData.length===0">
          <!--  v-show="data.length===0" -->
          <img src="@/assets/images/noData.png" />
          <p>暂无数据</p>
        </div>
      </template>
    </el-table>
    <Pagination :total="total"></Pagination>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%">
      <el-row :gutter="10">
        <el-form :model="form" label-width="80px" size="mini" :rules="ruleForm" ref='form' inline >
          <el-col :span="12">
            <el-form-item label="物料类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择物料类型">
                <el-option
                  v-for="(item,index) in materialType"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物料名称" prop='name'>
              <el-input v-model="form.name" placeholder="请输入物料名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格" prop='specification'>
              <el-input v-model="form.specification" placeholder="请输入物料规格"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位">
              <el-select v-model="form.unitOfMeasure" placeholder="请选择物料计量单位">
                <el-option
                  v-for="(item,index) in unitOfMeasure"
                  :key="index"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="默认单价">
              <el-input v-model="form.unitPrice" placeholder="请输入物料单价">
                <p slot="suffix" style="display: inline">元</p>
                </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保质期">
              <el-input v-model="form.shelfLife" placeholder="请输入物料保质期">
                <p slot="suffix" style="display: inline">天</p>
                </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到期提醒">
              <el-input v-model="form.expiryReminders" placeholder="请输入物料到期提醒">
                <p slot="suffix" style="display: inline">天</p>
                </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  materialList,
  addAndUpdate,
  materialDelete,
} from "@/api/material-management/material-list";
import {materialType,materialListTableHeard} from './constant/index.js'
import {unitOfMeasure} from '../health-management/constant/index.js'
export default {
  data() {
    return {
      total:0,
      title:'',
      dialogVisible: false,
      form: {
        expiryReminders: "",//到期提醒
        id: null,
        name: "",//物料名称
        // operatorsUser: 0,
        // operatorsUserName: "",
        pageNum: 0,
        pageSize: 10,
        //remark: "",
        shelfLife: "",//保质期
        specification: "",//规格
        //supplierId: 0,
        //supplierName: "",供应商
        type: "",//类型
        unitOfMeasure: "",//计量单位
        unitPrice: 0,//单价
      },
      ruleForm:{
        type: [
          { required: true, message: "请选择物料类型", trigger: "change" },
        ],
        name: [
          { required: true, message: "请输入物料名称", trigger: "blur" },
        ],
         specification: [
          { required: true, message: "请输入物料规格", trigger: "blur" },
        ],
      },
      tableData: [],
      materialType,
      unitOfMeasure,
      materialListTableHeard
    };
  },
  created() {
    this.initForm = this.$cloneDeep(this.form)
    this.getTableData();
  },
  methods: {
    async getTableData(data=this.form) {
      let res = await materialList(data);
      if (res.code == 200) {
        this.tableData = res.data.list
        this.total = res.data.total
      }
    },
    addOrUpdateMaterials(type,row) {
      this.dialogVisible = true;
      if(type == 'add'){
        this.title = '新增物料'
        this.form = this.$cloneDeep(this.initForm);
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      }else{
        this.title = '修改物料'
        this.form = this.$cloneDeep(row)
      }
    },
    async deleteMaterials(id){
      this.$alert("确定要删除？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        showCancelButton: true,
      })
        .then(async () => {
          let res = await materialDelete([id])
          if (res.code == 200) {
            this.tableData.length > 1
              ? this.form.pageNum
              : this.form.pageNum--;
            this.getTableData(this.initForm);
          }
        })
        .catch(() => {});
      
    },
    confirm(){
     this.$refs['form'].validate(async (valid) => {
        if (valid) {
          let res = await addAndUpdate(this.form)
          if(res.code == 200){
            this.dialogVisible = false
            this.getTableData(this.initForm)
          }
        }else{
          return false
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped></style>
